Tengo una aplicación React y, a veces, veo que {" "} se agrega automáticamente en mi código fuente. ¿Alguien puede ayudarme a entender por qué sucede esto? No está creando ningún error o error en la aplicación, ¿cuál es el motivo?
Por ejemplo:
<div className="pr-form display-block"> <input type="radio" name="same" onChange={handleChange("create")} defaultValue={values.create} />{" "} Create a new requirement <br /> <input type="radio" name="same" onChange={handleChange("reuse")} defaultValue={values.reuse} />{" "} Reuse a draft <br /> <input type="radio" name="same" onChange={handleChange("existing")} defaultValue={values.existing} />{" "} Using an existing requirement </div>Probablemente tenga instalado el complemento eslint-plugin-react, por lo que automáticamente agrega llaves a los espacios en blanco cuando se guarda el archivo. Alternativamente, podemos usar (espacios que no se separan), <span> </span> o \u00A0 Puede leer más sobre esta regla aquí rules/jsx-curly-brace-presence
Ejemplos de código correcto para esta regla:
<Color text={"\u00a0"} /> <App>{"Hello \u00b7 world"}</App>; <style type="text/css">{'.main { margin-top: 0; }'}</style>; /** * there's no way to inject a whitespace into jsx without a container so this * will always be allowed. */ <App>{' '}</App> <App>{' '}</App> <App>{/* comment */ <Bpp />}</App> // the comment makes the container necessary